<!-- 答卷列表 -->

<template>
  <WebTable path="answer" v-bind="tableProps" noPage>
    <RowIndex fixLeft />

    <RowTitle label="用户名称" bind="answerUserName" :width="120" fixLeft />

    <RowTime label="提交时间" bind="createTime" />

    <component v-for="item in one.questionList" :key="item.id" :is="getComponent(item)" v-bind="getProps(item)">
      <component
        v-for="sub in item.questionList"
        :key="sub.id"
        :is="getSubComponent(sub)"
        v-bind="getSubProps(item, sub)"
      >
        <RowText v-for="(subSub, j) in sub.questionList" :key="subSub.id" v-bind="getSubSubProps(item, subSub, j)" />
      </component>
    </component>

    <RowOperate :btns="['show']" :width="80" fixRight />
  </WebTable>
</template>

<script>
// ============================== 导入依赖 ============================== //

import CORE from '@/CORE'

// ============================== 导出组件 ============================== //

export default {
  /**
   * 名称定义 (实际使用名称)
   */
  name: 'MyAnswer',

  /**
   * 混入列表 (配置选项合并)
   */
  mixins: [CORE.mixWeb(), CORE.mixWeb('answer', 'answer_')],

  /**
   * 计算属性 (慎用箭头函数)
   */
  computed: {
    /**
     * 表格属性
     */
    tableProps() {
      for (const question of this.one.questionList) {
        if (question.type === 'textareaTable') return { tripleHead: true }
        if (question.type.includes('Table')) return { doubleHead: true }
      }
      return null
    },
  },

  /**
   * 本地方法 (轻量重要在前)
   */
  methods: {
    /**
     * 获取组件名称
     */
    getComponent({ type }) {
      return type.includes('Table') ? 'el-table-column' : 'RowText'
    },

    /**
     * 获取组件属性
     */
    getProps(item) {
      const { no, title } = item
      const text = title.length <= 6 ? title : `${title.slice(0, 6)}...`
      return {
        label: `${no}. ${text}`,
        bind: `no_${no}`,
        minWidth: 150,
        align: 'center',
      }
    },

    /**
     * 获取子组件名称
     */
    getSubComponent({ type }) {
      return type === 'textarea' ? 'el-table-column' : 'RowText'
    },

    /**
     * 获取子组件属性
     */
    getSubProps(item, sub) {
      const { no, title } = sub
      const len = sub.type === 'textarea' ? item.optionList.length * 9 - 4 : 6
      const text = title.length <= len ? title : `${title.slice(0, len)}...`
      return {
        label: `${no}. ${text}`,
        bind: `no_${item.no}_${no}`,
        minWidth: 150,
        align: 'center',
      }
    },

    /**
     * 获取子子组件属性
     */
    getSubSubProps(item, subSub, j) {
      const { content } = (item.optionList || [])[j]
      const text = content.length <= 8 ? content : `${content.slice(0, 8)}...`
      return {
        label: text,
        bind: `no_${item.no}_${subSub.no}`,
        minWidth: 150,
      }
    },
  },
}
</script>
